<template>
    <div class="user-loan-detail loan-iou-list">
        <div class="header">
            <div class="header__item" @click='setTabIndex(0)' :class="{'active':tabIndex == 0}">
                <p>{{list1.Amount | toYuan}}</p>
                <span>待确认<template v-if='records1.length'>({{records1.length}})</template></span>
            </div>
            <div class="header__item" @click='setTabIndex(1)' :class="{'active':tabIndex == 1}">
                <p>{{list2.Amount | toYuan}}</p>
                <span>进行中<template v-if='records2.length'>({{records2.length}})</template></span>
            </div>
            <div class="header__item" @click='setTabIndex(2)' :class="{'active':tabIndex == 2}">
                <p>{{list3.Amount | toYuan}}</p>
                <span>已完结<template v-if='records3.length'>({{records3.length}})</template></span>
            </div>
        </div>
        <div class="wrapper">
            <div class="user-no-repayment-box">
                
                <div class="main">

                    <template
                        v-if='tabIndex == 0'>
                        <div class="tab__item" v-for='item in records1'>
                            <div class="card nail2" @click='goIOU(item.receiptNo)'>
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount orange">{{item.borrowAmount | toYuan}}元</p>
                                    </div>
                                    <div class="loan-user-info">
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>出借人：</p>
                                            <p class='loan-user-info__phone'>{{item.lendUserName}}</p>
                                        </div>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>借款人：</p>
                                            <p class='loan-user-info__phone'>{{item.borrowUserName}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">借款日期：{{item.borrowTime | dateFormat}}</li>
                                    <li class="card__info-item">还款日期：{{item.repayTime | dateFormat}}</li>
                                    <li class="card__info-item full">离还款日还有：<count-down :date='item.repayTime'></count-down> </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <loading v-show='loading1' :size='15' mode='absolute'></loading> -->
                        <!-- <p class='user-list-explain' v-show='complete1 && records1.length'>以上为全部总待还</p> -->
                        <p class='page-placeholder' v-show='!records1.length'><span>暂无待确认的借条</span></p>
                    </template>

                    
                    <template
                        v-if='tabIndex == 1'>
                        <div class="tab__item" v-for='item in records2'>
                            <div class="card nail2" @click='goIOU(item.receiptNo)'>
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount orange">{{item.borrowAmount | toYuan}}元</p>
                                    </div>
                                    <div class="loan-user-info">
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>出借人：</p>
                                            <p class='loan-user-info__phone'>{{item.lendUserName}}</p>
                                        </div>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>借款人：</p>
                                            <p class='loan-user-info__phone'>{{item.borrowUserName}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">借款日期：{{item.borrowTime | dateFormat}}</li>
                                    <li class="card__info-item">还款日期：{{item.repayTime | dateFormat}}</li>
                                    <li class="card__info-item full">离还款日还有：<count-down :date='item.repayTime'></count-down> </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <loading v-show='loading1' :size='15' mode='absolute'></loading> -->
                        <!-- <p class='user-list-explain' v-show='complete2 && records2.length'>以上为全部总待还</p> -->
                        <p class='page-placeholder' v-show='!records2.length'><span>暂无进行中的借条</span></p>
                    </template>
                    
                    <template
                        v-if='tabIndex == 2'>
                        <div class="tab__item" v-for='item in records3'>
                            <div class="card nail2" @click='goIOU(item.receiptNo)'>
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount orange">{{item.borrowAmount | toYuan}}元</p>
                                    </div>
                                    <div class="loan-user-info">
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>出借人：</p>
                                            <p class='loan-user-info__phone'>{{item.lendUserName}}</p>
                                        </div>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>借款人：</p>
                                            <p class='loan-user-info__phone'>{{item.borrowUserName}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">借款日期：{{item.borrowTime | dateFormat}}</li>
                                    <li class="card__info-item">还款日期：{{item.repayTime | dateFormat}}</li>
                                    <li class="card__info-item full">离还款日还有：<count-down :date='item.repayTime'></count-down> </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <loading v-show='loading1' :size='15' mode='absolute'></loading> -->
                        <!-- <p class='user-list-explain' v-show='complete3 && records3.length'>以上为全部总待还</p> -->
                        <p class='page-placeholder' v-show='!records3.length'><span>暂无已完结的借条</span></p>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import countDown from '../components/CountDown.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { receiptApi, userApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,
            countDown,
            loadingMore
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                placeholder:'--',
                placeholderImg:require('../images/loading_1.png'),
                tabIndex:0,
                info:{},
                list1:{},
                list2:{},
                list3:{},
                records1:[],
                records2:[],
                records3:[],
                records4:[],
                show1:true,
                show2:false,
                show3:false,
                show4:false,
                complete1:false,
                complete2:false,
                complete3:false,
                complete4:false,
                loading1:true,
                loading2:true,
                loading3:true,
                loading4:true,
                loading_count:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function

            withinOneDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = diff.diff(now,'days')
                let diffTime = diff.diff(now)
                if(diffDays <= 0) return true
                return true
            },
            getInfo(){
                this.showLoading()
                userApi.waitRepayInfo()
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getList1(num){
                receiptApi.receiptList({
                    receiptState:'WAIT_CONFIRM'
                })
                .then(result=>{
                    this.list1 = result
                    this.records1 = result.receiptVos
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getList2(num){
                receiptApi.receiptList({
                    receiptState:'WAIT'
                })
                .then(result=>{
                    this.list2 = result
                    this.records2 = result.receiptVos
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getList3(num){
                receiptApi.receiptList({
                    receiptState:'REPAID'
                })
                .then(result=>{
                    this.list3 = result
                    this.records3 = result.receiptVos
                })
                .catch(error => {
                    console.error(error)
                })
            },
            setRecords1(records){
                this.records1 = records
            },
            setRecords2(records){
                this.records2 = records
            },
            setRecords3(records){
                this.records3 = records
            },
            setRecords4(records){
                this.records4 = records
            },
            setTabIndex(num){
                this.tabIndex = num
                $('.wrapper').scrollTop(0)

                let showStr = `show${num+1}`
                this.show1 = false
                this.show2 = false
                this.show3 = false
                this.show4 = false
                this[showStr] = true
            },
            goUserLoanInDetail(){
                return
            },
            goIOU(no){
                this.$router.push({
                    name:'loan-IOU-detail',
                    params:{
                        number:no
                    }
                })
            }
        },
        created(){
            this.showLoading()
            Promise.all([this.getList1(), this.getList2(), this.getList3()])
            .then(result=> {
                this.pageLoaded = true
                this.hideLoading()
            })
            .catch(error=> {
                console.error(error);
                this.pageLoaded = true
                this.hideLoading()
            });
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .loan-iou-list{
        .card__header{
            display:block;
        }
        .loan-user-info__box{
            display: flex;
            align-items: flex-end;
        }
        .loan-user-info__name{
            @extend %font-caption;
        }
        .loan-user-info__phone{
            @extend %font-body1;
            color:$importColor;
        }
        .card__info-item{
            display: flex;
        }
    }

</style>
